<template>
	<view class="pages">
		<!-- 基本信息 -->
		<div class="title"> 基本信息</div>
		<div class="item">
			<div class="item_label">
				操作任务:
			</div>
			<div class="item_value ">
				{{info.taskName}}
			</div>
		</div>
<!-- 		<div class="item">
			<div class="item_label">
				操作设备:
			</div>
			<div class="item_value ">
					{{info.deviceName}}
			</div>
		</div> -->
		<div class="item">
			<div class="item_label">
				期:
			</div>
			<div class="item_value ">
				{{info.edition}}
			</div>
		</div>
		<div class="item">
			<div class="item_label">
				操作票专业:
			</div>
			<div class="item_value ">
						{{info.category}}
			</div>
		</div>
		<div class="item">
			<div class="item_label">
				操作人:
			</div>
			<div class="item_value ">
					{{info.operateUserName}}
			</div>
		</div>
		<div class="item">
			<div class="item_label">
				监护人:
			</div>
			<div class="item_value ">
				 {{ info.guardianUserName }}
			</div>
		</div>
		<div class="item">
			<div class="item_label">
				值长:
			</div>
			<div class="item_value ">
				 {{ info.shiftSupervisorName }}
			</div>
		</div>
		<div class="item">
			<div class="item_label">
				值班长:
			</div>
			<div class="item_value ">
		 {{ info.monitorUserName }}
			</div>
		</div>
		<div class="item"  > 
			<div class="item_label">
				关联票:
			</div>
			<div class="item_value " v-if="values">
				 {{ values }}
			</div>
		</div>
<!-- 		<div class="item">
			<div class="item_label">
				作业前准备:
			</div>
			<div class="item_value ">
			    {{ info.preparationContent }}
			</div>
		</div>
		<div class="item">
			<div class="item_label">
				员工授权停工:
			</div>
			<div class="item_value ">
			     {{ info.shutdownContent }}
			</div>
		</div> -->
		<!-- 交接修改 -->
		<block v-if="type !=1">
			<div class="item">
				<div class="item_label">
					申请人:
				</div>
				<div class="item_value ">
				 {{ info.createUser }}
				</div>
			</div>
			<div class="item">
				<div class="item_label">
					申请时间:
				</div>
				<div class="item_value ">
					{{ info.createDateOrder }}
				</div>
			</div>
			<div class="item">
				<div class="item_label">
					{{type ==2?'交接' :'跳步'}}缘由:
				</div>
				<div class="item_value ">
					 {{ reason }}
				</div>
			</div>

		</block>
		<!-- 风险控制措施 -->
		<block v-if="type ==1">
			<div class="title"> 风险控制</div>
			<!-- 风险控制措施-->
			<view class="content">
				<!-- <view class="prompt">注：请按顺序执行</view> -->
				<view class="content_item" v-for="(v,i) in listRisk" :key="i">
					<view class="content_item_title">{{i+1}}、{{v.identification}}</view>
					<view class="content_item_content" v-if="v.measure">风险辨识：{{v.measure}}</view>
					<!-- <view class="content_item_content" v-if="v.ifPhotograph">是否拍照：{{v.ifPhotograph == 1?'是' :'否'}}</view> -->
				</view>
			</view>
		</block>
		<!-- 交接修改措施 或跳步修改 -->
		<block>
			<div class="title" v-if="type  ==1"> 操作流程</div>
			<div class="title" v-if="type  ==2"> 交接修改后</div>
			<div class="title" v-if="type  ==3"> 操作流程跳步后</div>
			<view class="item" v-for=" (v,i) in list" :key="i" style="display: block;">
				<view class="item_herder flex align-items  ">
					<view class="item_herder_left">{{i+1}}、{{v.name}}</view>
				</view>
			<!-- 	<view class="content_item_content">
					类型：{{   v.category == 0
                ? "判断"
                : v.category == 1
                ? "填空"
                : "选择"}}
				</view>
				<view class="content_item_content">
					是否拍照：{{v.ifPhotograph == 1?'是' :'否'}}
				</view> -->
			</view>
		
		</block>
	</view>
</template>

<script>
	import {
		operateOrderGetInfo,
		handoverDetails,
		jumpDetails
	} from '@/api/risks.js'
	export default {
		props: {
			id: {
				type: [String, Number], //穿入id
				default: ''
			},
			type: {
				type: [String, Number],
				default: 1, // 1 新增操作票 2 交接内容修改 3 跳步修改
			}
		},
		data() {
			return {
				info: {},
				listRisk: [],
				list: [],
				values:'',
				reason:''
			};
		},
		methods: {
			async getList() {
				if (this.type == 1) {
					const res = await operateOrderGetInfo({
						id: this.id
					})
					console.log(res, "获取操作票详细信息");
					this.info = res.datas
					this.listRisk = res.datas.listRisk
					this.list = res.datas.listProcess
					this.values = res.datas.correlationNumbers ? res.datas.correlationNumbers.map(v => v.orderNumber).toString() : ''
				}
				if(this.type ==2){
					const res = await handoverDetails(this.id)
					console.log(res,"交接内容修改记录详情");
					 let obj = res.datas.order
					      obj.afterList = res.datas.afterList
					      obj.beforeList = res.datas.beforeList
					      obj.createUser = res.datas.createUser
					      obj.createDateOrder = res.datas.createDate
					      this.info = { ...obj }
						   this.list = obj.afterList
					      this.reason = res.datas.reason
					      this.values = res.datas.order.correlationNumbers ? res.datas.order.correlationNumbers.map(v => v.orderNumber).toString() : ''
				}
				if(this.type ==3){
					 const res = await jumpDetails(this.id)
					      console.log(res, "11111111111")
					      let obj = res.datas.order
					      obj.afterList = res.datas.afterList
					      obj.beforeList = res.datas.beforeList
					      obj.createUser = res.datas.createUser
					      obj.createDateOrder = res.datas.createDate
					      this.info = { ...obj }
						  this.list = obj.afterList
					      this.info.reason = res.datas.reason
					      this.values = res.datas.order.correlationNumbers ? res.datas.order.correlationNumbers.map(v => v.orderNumber).toString() : ''
					      console.log(this.info, " this.info")
				}
			}
		},
		created() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		padding-top: 2rpx;
	}

	.title {
		margin: 10rpx auto;
		font-weight: 600;
		font-size: 29rpx;
		padding-left: 20rpx;
		margin-bottom: 0;
	}

	.item {
		font-size: 26rpx;
		display: flex;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #E6E6E6;
		margin-top: 20rpx;

		&_herder {
			&_left {
				flex: 1;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				color: #000000;
				line-height: 40rpx;
			}

			&_right {
				width: 120rpx;
				// height: 100rpx;
				margin-left: 18rpx;
				border-radius: 24rpx;
				border: 1rpx solid #267DFF;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;
				color: #267DFF;
			}
		}

		&_label {
			flex: 0 0 auto;
			font-weight: 600;
			line-height: 40rpx;
			width: 160rpx;
		}

		&_value {
			// padding-left: 10rpx;
			flex: 0.9;
			line-height: 40rpx;
			word-break: break-all;

		}
	}

	.content {
		.prompt {
			margin-top: 21rpx;
			font-weight: 400;
			font-size: 25rpx;
			color: #FF0000;
			text-align: left;
			font-style: normal;
		}

		&_item {
			// width: 693rpx;
			// margin: 0 auto;
			margin-top: 17rpx;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid #E6E6E6;
			padding-left: 10rpx;

			&_title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				// color: #267DFF;
				line-height: 40rpx;
			}

			&_content {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 25rpx;
				color: #000000;
				margin-top: 10rpx;
				line-height: 36rpx;
				word-break: break-all;
			}

			&_rideo {
				margin-top: 17rpx;

				.yuan {
					width: 31rpx;
					height: 31rpx;
					border: 2rpx solid #E6E6E6;
					border-radius: 50%;
					margin-right: 14rpx;
				}

				.txt {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 25rpx;
					color: #000000;
				}

				.color {
					color: #8B8B8B;
				}

				.imgyuan {
					width: 34rpx;
					height: 34rpx;
					margin-right: 14rpx;
				}
			}
		}

		// &_item:last-child {
		// 	border: none;
		// }
	}
</style>